@import "../core/util";

.md-checkbox-field {
  font-size: 16px;
  line-height: 24px;
  width: 100%;
  display: inline-block;
  height: 48px;
  margin-top: 24px;
  @ckb-size: 48px;

  label {
    display: block;
    float: left;
    width: auto;
    height: @ckb-size;
    line-height: @ckb-size;
  }

  .checkbox-wrap {
    display: block;
    float: right;
    width: @ckb-size;
    height: @ckb-size;
    border-radius: 50%;
    position: relative;
    cursor: pointer;

    .touch-ripple {
      background: @flat-button-secondary-text-color;
    }

    .focus-ripple {
      background: @flat-button-secondary-focus-ripple-color;
    }

    input[type=checkbox] {
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }

    & > .md-icon {
      position: absolute;
      right: 12px;
      top: 12px;
      color: @primary-1-color;
      .ease-out();

      // 来自material的icon
      &.checked {
        .user-transform(scale(0));

        &:before {
          content: "\f2e1";
        }
      }

      &.unchecked {
        .user-transform(scale(1));

        &:before {
          content: "\f2e2";
        }
      }
    }
  }

  // 选中状态
  &.has-checked {
    .checkbox-wrap {
      & > .md-icon {
        &.checked {
          .user-transform(scale(1));
        }

        &.unchecked {
          .user-transform(scale(0));
        }
      }
    }
  }

  // check在左边

  &.check-left {
    .checkbox-wrap {
      float: left;
    }
  }

}